<template>
  <div class="ring"></div>
</template>

<script>
import mockdata from '@/assets/data/page1/part4.json'

export default {
  name: '',
  props: {
    data: Object
  },
  data() {
    return {
      myChart: null
    }
  },
  methods: {
    setChart() {
      let option = {
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          textStyle: {
            color: '#6dd0e3' // 设置图例文字颜色为红色
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b}: {c} ({d}%)",
          backgroundColor: '#11367a',
          textStyle: {
            color: '#6dd0e3',
            fontSize: 10,
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: true,
            label: {
              show: true,
              position: 'outside',
              fontSize: 10,
              color: '#75deef'
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 10,
              lineStyle: {
                color: '#303851'
              }
            },
            data: mockdata
          }
        ]
      };
      if (!this.myChart) this.myChart= this.$echarts(this.$el);
      this.myChart.clear();
      this.myChart.resize()
      this.myChart.setOption(option);

    }
  },
  mounted() {
    this.setChart()
  },
}
</script>

<style lang="less" scoped>
.ring {
  width: 100%;
  height: 100%;
}
</style>
